<template>
    <div class="epidemic-situation">
        <div class="title">世界疫情地图</div>

        <div id="main" style="width: 100%;height: 7rem;"></div>
    </div>
</template>

<script>
    import echarts from 'echarts'
    import api from '../../../api/index'

    export default {
        name: "WorldMap",

        async mounted() {
            const result = await api.getWorldData();
            if(result.data.codeid === 10000) {
                let worldData = result.data.retdata.map(item => {
                    return {
                        name: item.xArea,
                        value: item.confirm,
                    }
                });
                this.$myChart.worldMap('main',worldData);
            }else {
                console.log('接口错误')
            }
        }

    }
</script>

<style scoped lang="less">
    .epidemic-situation{
        margin-top: 0.1rem;
        width: 94%;
        padding-left: 0.2rem;
        box-sizing: border-box;

        .title{
            padding: 0.1rem;
            font-weight: bold;
            font-size: 16px;
        }
        #main  {
            box-shadow: 0 0 3px 2px rgba(0, 0, 0, .2);
            margin: 0.2rem auto;
            /*box-shadow: 0 0 3px 2px rgba(0,0,0,0.2);*/
            background-color: #f5f5f5;
            margin-left: 0.1rem;
        }
    }
</style>
